<div class="navbar navbar-inverse" role="navigation">
    <div>
        <div class="navbar-header">
            　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
            <a href="__APP__" class="navbar-brand">
                <i class="glyphicon glyphicon-book"></i>
                课堂问答系统
            </a>
        </div>
        <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
        <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li><a href="__MODULE__/TeaClass/classes">我教的班级</a></li>
                <li><a href="__MODULE__/TeaCourse/course">我教的课程</a></li>
                <if condition="$has_filed gt 0">
                    <li><a href="javasript:;" id="nav-file">归档管理</a></li>
                </if>
            </ul>
            <ul class="nav navbar-nav pull-right">
                <li class="dropdown">
                    <a href="##" data-toggle="dropdown" class="dropdown-toggle">
                        {$Think.session.name}<span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li ><a href="__MODULE__/TeaSettings/info"><span class="glyphicon glyphicon-user"></span> 个人设置</a></li>
                        <li ><a href="__MODULE__/Auth/logout"><span class="glyphicon glyphicon-log-out"></span> 安全退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="modal fade" id="file-class-modal" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">归档管理</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-3 col-md-offset-9">
                        <select class="form-control choose-course">
                            <option value="all">全部课程</option>
                            <volist name="courses" id="cou">
                                <option value="{$cou.cou_id}">{$cou.cou_name}</option>
                            </volist>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 class-panel" id="hidden-panel" value="{$cla.cla_id}">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h1 class="panel-title"><a>{$cla.cla_name} - {$cla.cou_name}</a></h1>
                                <div class="dropdown pull-right">
                                    <a class="class-edit dropdown-toggle" href="javascript:;" data-toggle="dropdown"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                        <li><a href="javascript:;" class="menu-class-renew">恢复</a></li>
                                        <li><a href="javascript:;" class="menu-class-delete">删除</a></li>
                                    </ul>
                                </div>
                                <p><small>开始:{$cla.cla_start} 结束:{$cla.cla_end}</small></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 删除班级modal -->
<div class="modal fade" id="del-filcla-modal" role="dialog" aria-labelledby="del-class">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title text-danger">删除班级</h4>
            </div>
            <div class="modal-body">
                <p>是否删除班级</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger btn-class-del">删除</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $("#nav-file").click(function() {
            $("#file-class-modal").modal("toggle");
            $("#file-class-modal .choose-course").val("all");
            postApi("__MODULE__/TeaClass/getFiledClass", function(err, data) {
                if (err) {
                    showError(err.message);
                } else {
                    showFiledClass(data.data); // 显示归档班级
                }
            });
        });

        var bgcolors = new Array("default", "info", "primary", "warning", "danger", "success");
        var hidden_panel = $("#hidden-panel"); // 被用来克隆的对象
        hidden_panel.hide();
        function showFiledClass(classes) {
            var dompanel = hidden_panel[0], // 转换成dom对象
                parent = hidden_panel.parent(), // 获取父节点
                panels = parent.find(".class-panel"),
                clone,  // 克隆对象
                clone_jq; // 克隆对象的jquery对象
            panels.slice(1, panels.length).remove(); // 清除班级面板
            for (var i = 0; i < classes.length; i++) {
                clone = dompanel.cloneNode(true);
                clone_jq = $(clone);
                clone_jq.find(".panel-title a").text(classes[i].cla_name + " - " + classes[i].cou_name);
                clone_jq.find(".panel-title a").attr("href", "__MODULE__/TeaClass/classStuInfo?cd=" + classes[i].cou_id + "&" + "cad=" + classes[i].cla_id);
                clone_jq.find("p").text("开始:" + classes[i].cla_start + " 结束:" + classes[i].cla_end);
                clone_jq.attr("value", classes[i].cla_id);
                clone_jq.show();
                parent.append(clone_jq);
            }

            $("#file-class-modal .panel").each(function() {
                var num = parseInt($(this).parent().attr("value")) % 6;
                $(this).addClass("panel-"+bgcolors[num]);
            });
            // 监听menu恢复按钮
            $("#file-class-modal .menu-class-renew").click(function() {
                var cla_id = $(this).parents(".class-panel").attr("value");
                postApi("__MODULE__/TeaClass/renewClass", {cla_id:cla_id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        showSuccessReload(data.message);
                    }
                });
            });

            // 判断是否可以删除并弹出modal
            var cur_del_class = {};
            $("#file-class-modal .menu-class-delete").click(function() {
                cur_del_class.id = $(this).parents(".class-panel").attr("value");
                cur_del_class.name = $(this).parents(".panel-heading").find(".panel-title a").text();
                postApi("__MODULE__/TeaClass/checkIsDelete", {cla_id:cur_del_class.id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        $("#del-filcla-modal").modal("toggle");
                        $("#del-filcla-modal").find(".modal-body p").text("是否删除班级 " + cur_del_class.name);
                    }
                });
            });

            // 确认删除
            $("#del-filcla-modal .btn-class-del").click(function() {
                postApi("__MODULE__/TeaClass/deleteClass", {cla_id:cur_del_class.id}, function(err, data) {
                    if (err) {
                        showError(err.message);
                    } else {
                        $("#del-filcla-modal").modal("toggle");
                        showSuccessReload(data.message);
                    }
                });
            });
        }

        // 监听下拉框选择事件
        $("#file-class-modal .choose-course").change(function() {
            var cd = "";
            if ($(this).val() != "all")
                cd = $(this).val();
            postApi("__MODULE__/TeaClass/getFiledClass", (cd?{cd:cd}:{}), function(err, data) {
                if (err) {
                    showError(err.message);
                } else {
                    showFiledClass(data.data); // 显示归档班级
                }
            });
        });
    });
</script>  